<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>压缩设置</title>
    <link rel="stylesheet" href="assets/common.bundle.css">
    <link rel="stylesheet" href="assets/settings.bundle.css">
</head>

<body>
<div class="settings">
    <div class="settings-bd">
        <h2>图片：</h2>
        <div class="settings-backup">
            <input type="checkbox" name="backup"><span>在压缩前备份原始文件（source目录）</span>
        </div>
        <table class="settings-tb">
            <!-- <caption>
                拖动滑块设置压缩质量
            </caption> -->
            <tbody>
            <tr>
                <td class="settings-name">最大宽度</td>
                <td>
                    <input type="number" id="maxWidth"/> px
                </td>
                <td class="settings-value"></td>
            </tr>
            <tr>
                <td class="settings-name">最大高度</td>
                <td>
                    <input type="number" id="maxHeight"/> px
                </td>
                <td class="settings-value"></td>
            </tr>
            <tr>
                <td class="settings-name">jpg</td>
                <td>
                    <input class="settings-range" type="range" min="60" max="100" step="1" data-target="jpg"/>
                </td>
                <td class="settings-value">
                    <output id="jpg">80</output>
                </td>
            </tr>
            <tr>
                <td class="settings-name">webp</td>
                <td>
                    <input class="settings-range" type="range" min="60" max="100" step="1" data-target="webp"/>
                </td>
                <td class="settings-value">
                    <output id="webp">85</output>
                </td>
            </tr>
            <tr>
                <td class="settings-name">png</td>
                <td>已设置最佳方案</td>
                <td class="settings-value"></td>
            </tr>
            <tr>
                <td class="settings-name">gif</td>
                <td>无损压缩</td>
                <td class="settings-value"></td>
            </tr>
            <tr>
                <td class="settings-name">svg</td>
                <td>已设置最佳方案</td>
                <td class="settings-value"></td>
            </tr>
            </tbody>
        </table>
        <h2>视频：</h2>
        <table class="settings-tb">
            <!-- <caption>
                拖动滑块设置压缩质量
            </caption> -->
            <tbody>
            <tr>
                <td class="settings-name">最大高度</td>
                <td width="200">
                    <input type="number" id="maxHeightVideo"/>
                </td>
                <td class="settings-value"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="settings-ft">
        <ul>
        </ul>
    </div>
</div>
<script src="assets/common.bundle.js"></script>
<script src="assets/settings.bundle.js"></script>

</body>
</html>
